import React, { PureComponent, Fragment } from 'react';
import { Layout, Avatar, Statistic } from 'antd';
import styles from './style.less';
import './index.css';

// 首页的布局
class PrimaryLayout extends PureComponent {
  render() {
    return (
      <Fragment>
        <Layout>
          <div className="ant-pro-page-container-warp">
            <div className="ant-page-header ant-page-header-ghost">
              <div className="ant-page-header-content">
                <div className={styles.pageHeaderContent}>
                  <div className={styles.avatar}>
                    <Avatar size="large" src="" />
                  </div>
                  <div className={styles.content}>
                    <div className={styles.contentTitle}>
                      早安， 博羸 ，祝你开心每一天！
                    </div>
                    <div>某某平台部－某某技术部</div>
                  </div>
                </div>

                <div className={styles.extraContent}>
                  <div className={styles.statItem}>
                    <Statistic title="项目数" value={56} />
                  </div>
                  <div className={styles.statItem}>
                    <Statistic title="团队内排名" value={8} suffix="/ 24" />
                  </div>
                  <div className={styles.statItem}>
                    <Statistic title="项目访问" value={2223} />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="ant-pro-grid-content wide">
            <div className="ant-pro-grid-content-children">
              <div className="ant-pro-page-container-children-content">
                {this.props.children}
              </div>
            </div>
          </div>
        </Layout>
      </Fragment>
    );
  }
}

export default PrimaryLayout;
